<template>
  <div class="question-tree-box" v-loading="loading">
    <div class="oe-question-search">
      <!-- <span class="oe-question-text">名称：</span> -->
      <!-- <span class="oe-question-input">
        <a-input placeholder="请输入知识点名称" v-model="examName" />
      </span> -->
      <span class="oe-manage-btns">
        <!-- <a-button type="primary" @click.stop="getKonwledgeList">查询</a-button> -->
        <a-button v-if="operationList.includes('add/edit/del:ques')" type="primary" @click="setOneTitle(0)"
          >新增知识点</a-button
        >
      </span>
    </div>
    <!-- 第一层 -->
    <div class="question-tree-one" v-for="(one, numOne) in list" :key="numOne">
      <div class="question-box question-one-box clearfix" @click.stop="getChild(one.IsParent, 0, numOne)">
        <div class="question-one-title fl">
          <i class="iconfont icon-file" v-if="!one.IsParent"></i>
          <span v-else>
              <i class="iconfont icon-plus-circle" v-if="!one.Checked"></i>
              <i class="iconfont icon-jianqu" v-else></i>
          </span>
          {{ one.Title }}
        </div>
        <div class="question-one-set fr">
          <a-button type="primary"  @click.stop="setOneTitle(1, numOne)">编辑</a-button>
          <a-button type="danger" style="margin-left: 10px" @click.stop="deleteKnowledge(one.Id)">删除</a-button>
          <a-button type="primary" style="margin-left: 10px" @click.stop="setTwoTitle(0, numOne)">新增子级</a-button>
        </div>
      </div>
      <!-- 第二层 -->
      <div v-if="one.Checked">
        <div class="question-tree-two" v-for="(two, numTwo) in one.child" :key="numTwo">
          <div class="question-box question-two-box clearfix" @click.stop="getChild(two.IsParent, 1, numOne, numTwo)">
            <div class="question-two-title fl">
              <i class="iconfont icon-file" v-if="!two.IsParent"></i>
              <span v-else>
                <i class="iconfont icon-plus-circle" v-if="!two.Checked"></i>
                <i class="iconfont icon-jianqu" v-else></i>
              </span>
              {{ two.Title }}
            </div>
            <div class="question-two-set fr">
              <a-button type="primary" @click.stop="setTwoTitle(1, numOne, numTwo)">编辑</a-button>
              <a-button type="danger" style="margin-left: 10px" @click.stop="deleteKnowledge(two.Id, 0, numOne)">删除</a-button>
              <a-button type="primary" style="margin-left: 10px" @click.stop="setThreeTitle(0, numOne, numTwo)"
                >新增子级</a-button
              >
            </div>
          </div>
          <!-- 第三层 -->
          <div v-if="two.Checked">
            <div class="question-tree-two" v-for="(three, numThree) in two.child" :key="numThree">
              <div class="question-box question-two-box clearfix" @click.stop="getChild(three.IsParent, 2, numOne, numTwo, numThree)">
                <div class="question-two-title fl">
                  <i class="iconfont icon-file" v-if="!three.IsParent"></i>
                  <span v-else>
                    <i class="iconfont icon-plus-circle" v-if="!three.Checked"></i>
                    <i class="iconfont icon-jianqu" v-else></i>
                  </span>
                  {{ three.Title }}
                </div>
                <div class="question-two-set fr">
                  <a-button type="primary" @click.stop="setThreeTitle(1, numOne, numTwo,numThree)">编辑</a-button>
                  <a-button type="danger" style="margin-left: 10px" @click.stop="deleteKnowledge(three.Id, 2, numOne, numTwo,numThree)">删除</a-button>
                  <a-button type="primary" style="margin-left: 10px" @click.stop="setFourTitle(0, numOne, numTwo, numThree)">新增子级</a-button>
                </div>
              </div>
              <!-- 第四层 -->
              <div v-if="three.Checked">
                <div class="question-tree-two" v-for="(four, numFour) in three.child" :key="numFour">
                  <div class="question-box question-two-box clearfix" @click.stop="getChild(one.IsParent, 3, numOne, numTwo, numThree, numFour)">
                    <div class="question-two-title fl">
                      <i class="iconfont icon-file" v-if="!four.IsParent"></i>
                      <span v-else>
                        <i class="iconfont icon-plus-circle" v-if="!four.Checked"></i>
                        <i class="iconfont icon-jianqu" v-else></i>
                      </span>
                      {{ four.Title }}
                    </div>
                    <div class="question-two-set fr">
                      <a-button type="primary" @click.stop="setFourTitle(1, numOne, numTwo,numThree, numFour)">编辑</a-button>
                      <a-button type="danger" style="margin-left: 10px" @click.stop="deleteKnowledge(four.Id, 3, numOne, numTwo, numThree, numFour)">删除</a-button>
                      <a-button type="primary" style="margin-left: 10px" @click.stop="setFiveTitle(0, numOne, numTwo, numThree, numFour)">新增子级</a-button>
                    </div>
                  </div>
                  <!-- 第五层 -->
                  <div v-if="four.Checked">
                    <div class="question-tree-two" v-for="(five, numFive) in four.child" :key="numFive">
                        <div class="question-box question-two-box clearfix">
                            <div class="question-five-title fl">
                            <i class="iconfont icon-file"></i>
                            {{ five.Title }}
                            </div>
                            <div class="question-two-set fr">
                            <a-button type="primary" @click.stop="setFiveTitle(1, numOne, numTwo,numThree, numFour, numFive)">编辑</a-button>
                            <a-button type="danger" style="margin-left: 10px" @click.stop="deleteKnowledge(five.Id, 3, numOne, numTwo, numThree, numFour)">删除</a-button>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
      <a-form-model ref="ruleForm" :model="lis" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="title" label="知识点名称" prop="title">
          <a-input v-model="lis.title" placeholder="请输入知识点名称" />
        </a-form-model-item>
        <a-form-model-item ref="SortOrder" label="排序" prop="SortOrder">
          <a-input-number placeholder="请输入排序" v-model="lis.SortOrder" :min="1" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // list: [
      //   {
      //     Id: '1-1', //知识点Id
      //     Title: '第一层-1', //知识点名称
      //     IsParent: true, //是否为父级
      //     SortOrder: 1, //排序
      //     DesignLevel: 1, //层级
      //     ParentId: '1-1', //父级Id
      //     Checked: false,
      //     child: [
      //       {
      //         Id: '2-1', //知识点Id
      //         Title: '第二层-1', //知识点名称
      //         IsParent: false, //是否为父级
      //         SortOrder: 1, //排序
      //         DesignLevel: 2, //层级
      //         ParentId: '2-1', //父级Id
      //         child: [],
      //       },
      //       {
      //         Id: '2-2', //知识点Id
      //         Title: '第二层-2', //知识点名称
      //         IsParent: true, //是否为父级
      //         SortOrder: 2, //排序
      //         DesignLevel: 2, //层级
      //         ParentId: '2-2', //父级Id
      //         child: [],
      //       },
      //     ],
      //   },
      //   {
      //     Id: '1-2',
      //     Title: '第一层-2',
      //     IsParent: false,
      //     SortOrder: 2,
      //     DesignLevel: 1,
      //     ParentId: '1-2',
      //     Checked: false,
      //   },
      // ],
      list: [],
      addlis: {
          childType: -1,
          oneNum: -1,
          twoNum: -1,
          threeNum: -1,
          fourNum: -1
      },
      lis: {
        id: '', //知识点Id
        title: '', //知识点名称
        parentId: '', //父级Id
        SortOrder: 1,
      },
      SortOrder: ['一', '二', '三', '四', '五'],
      visible: false,
      title: '新增知识点',
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      rules: {
        title: [{ required: true, message: '请输入知识点名称', trigger: 'blur' }],
        SortOrder: [{ required: true, message: '请输入排序', trigger: 'blur' }],
      },
    };
  },
  props: {
    courseId: {
      type: String,
      default: '',
    },
    operationList: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.getAllKnowledgeTreeList();
  },
  methods: {
    // 获取整体知识点
    getAllKnowledgeTreeList() {
        this.loading = true;
        this.$http.post('/api/design/knowledgetree/getAllKnowledgeTreeList', {
          courseId: this.courseId, //分类Id
        }).then((res)=>{
            this.loading = false;
            this.list = res.knowledgeList;
            let oneNum = this.addlis.oneNum,
                twoNum = this.addlis.twoNum,
                threeNum = this.addlis.threeNum,
                fourNum = this.addlis.fourNum
            if (this.addlis.childType == 0) {
                if (this.list[oneNum].IsParent) {
                    this.list[oneNum].Checked = true;
                }
            } else if (this.addlis.childType == 1) {
                this.list[oneNum].Checked = true;
                if (this.list[oneNum].child[twoNum].IsParent) {
                    this.list[oneNum].child[twoNum].Checked = true;
                }
            } else if (this.addlis.childType == 2) {
                this.list[oneNum].Checked = true;
                this.list[oneNum].child[twoNum].Checked = true;
                if (this.list[oneNum].child[twoNum].child[threeNum].IsParent) {
                    this.list[oneNum].child[twoNum].child[threeNum].Checked = true;
                }
            } else if (this.addlis.childType == 3) {
                this.list[oneNum].Checked = true;
                this.list[oneNum].child[twoNum].Checked = true;
                this.list[oneNum].child[twoNum].child[threeNum].Checked = true;
                if (this.list[oneNum].child[twoNum].child[threeNum].child[fourNum].IsParent) {
                    this.list[oneNum].child[twoNum].child[threeNum].child[fourNum].Checked = true;
                };
            };
            this.ResetLis();
        })
    },
    ResetLis() {
        this.addlis = {
          childType: -1,
          oneNum: -1,
          twoNum: -1,
          threeNum: -1,
          fourNum: -1,
        };
    },
    // 展示 隐藏子级
    getChild(IsParent, type, one, two, three, four) {
      if (IsParent) {
        if (type == 0) { //展示 隐藏第二层
          this.list[one].Checked = !this.list[one].Checked;
        } else if (type == 1) { //展示 隐藏第三层
          this.list[one].child[two].Checked = !this.list[one].child[two].Checked;
        } else if (type == 2) { //展示 隐藏第四层
          this.list[one].child[two].child[three].Checked = !this.list[one].child[two].child[three].Checked;
        } else if (type == 3){ //展示 隐藏第五层
          this.list[one].child[two].child[three].child[four].Checked = !this.list[one].child[two].child[three].child[four].Checked;
        };
      }
    },
    // 删除节点
    deleteKnowledge(id, type, numOne, numTwo, numThree, numFour) {
      this.loading = true;
      this.addlis.childType = type;
      this.addlis.oneNum = numOne;
      this.addlis.twoNum = numTwo;
      this.addlis.threeNum = numThree;
      this.addlis.fourNum = numFour;
      this.$http
        .post('/api/design/knowledgetree/deleteKnowledge', {
          courseId: this.courseId, //分类Id
          Id: id, //附件Id（第一层为0）
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getAllKnowledgeTreeList();
          } else {
            this.$message.error(res.msg);
          };
        });
    },
    // 第一层 新增编辑弹窗
    setOneTitle(type, num) {
      if (type == 0) {
        this.title = '第一层知识点新增';
      } else {
        this.lis.id = this.list[num].Id;
        this.lis.title = this.list[num].Title;
        this.lis.SortOrder = this.list[num].SortOrder;
        this.lis.parentId = '';
        this.title = '第一层知识点编辑';
      }
      this.visible = true;
    },
    // 第二层 新增编辑弹窗
    setTwoTitle(type, num1, num2) {
      this.addlis.childType = 0;
      this.addlis.oneNum = num1;
      if (type == 0) {
        this.title = '第二层知识点新增';
        this.lis.parentId = this.list[num1].Id;
      } else {
        this.lis.id = this.list[num1].child[num2].Id;
        this.lis.title = this.list[num1].child[num2].Title;
        this.lis.parentId = this.list[num1].child[num2].ParentId;
        this.lis.SortOrder = this.list[num1].child[num2].SortOrder;
        this.title = '第二层知识点编辑';
      }
      this.visible = true;
    },
    // 第三层 新增编辑弹窗 
    setThreeTitle(type, num1, num2, num3) {
      this.addlis.childType = 1;
      this.addlis.oneNum = num1;
      this.addlis.twoNum = num2;
      if (type == 0) {
        this.title = '第三层知识点新增';
        this.lis.parentId = this.list[num1].child[num2].Id;
      } else {
        this.lis.id = this.list[num1].child[num2].child[num3].Id;
        this.lis.title = this.list[num1].child[num2].child[num3].Title;
        this.lis.parentId = this.list[num1].child[num2].child[num3].ParentId;
        this.lis.SortOrder = this.list[num1].child[num2].child[num3].SortOrder;
        this.title = '第三层知识点编辑';
      }
      this.visible = true;
    },
    // 第四层 新增编辑弹窗 
    setFourTitle(type, num1, num2, num3, num4) {
      this.addlis.childType = 2;
      this.addlis.oneNum = num1;
      this.addlis.twoNum = num2;
      this.addlis.threeNum = num3;
      if (type == 0) {
        this.title = '第四层知识点新增';
        this.lis.parentId = this.list[num1].child[num2].child[num3].Id;
      } else {
        this.lis.id = this.list[num1].child[num2].child[num3].child[num4].Id;
        this.lis.title = this.list[num1].child[num2].child[num3].child[num4].Title;
        this.lis.parentId = this.list[num1].child[num2].child[num3].child[num4].ParentId;
        this.lis.SortOrder = this.list[num1].child[num2].child[num3].child[num4].SortOrder;
        this.title = '第四层知识点编辑';
      }
      this.visible = true;
    },
    // 第五层 新增编辑弹窗 
    setFiveTitle(type, num1, num2, num3, num4, num5) {
      this.addlis.childType = 3;
      this.addlis.oneNum = num1;
      this.addlis.twoNum = num2;
      this.addlis.threeNum = num3;
      this.addlis.fourNum = num4;
      if (type == 0) {
        this.title = '第五层知识点新增';
        this.lis.parentId = this.list[num1].child[num2].child[num3].child[num4].Id;
      } else {
        this.lis.id = this.list[num1].child[num2].child[num3].child[num4].child[num5].Id;
        this.lis.title = this.list[num1].child[num2].child[num3].child[num4].child[num5].Title;
        this.lis.parentId = this.list[num1].child[num2].child[num3].child[num4].child[num5].ParentId;
        this.lis.SortOrder = this.list[num1].child[num2].child[num3].child[num4].child[num5].SortOrder;
        this.title = '第五层知识点编辑';
      }
      this.visible = true;
    },
    // 编辑 新增
    editKnowledgeTree() {
      this.loading = true;
      this.$http
        .post('/api/design/knowledgetree/editKnowledgeTree', {
          courseId: this.courseId, //分类Id
          id: this.lis.id, //知识点Id
          title: this.lis.title, //知识点名称
          parentId: this.lis.parentId, //父级Id
          sortOrder: this.lis.SortOrder, //排序序号
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getAllKnowledgeTreeList();
            this.handleCancel();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 关闭新增 编辑 弹窗
    handleCancel() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
      this.lis = {
        id: '', //知识点Id
        title: '', //知识点名称
        parentId: '', //父级Id
        SortOrder: 1,
      };
    },
    // 新增 编辑 弹窗确定
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.editKnowledgeTree();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>